import {logRecords} from '@/services/log-record-api';
import {ActionType, PageContainer, ProColumns, ProTable} from '@ant-design/pro-components';
import {Modal} from 'antd';
import React, {useRef} from 'react';
import moment from "moment";
import {useLocation} from "umi";

export type LogProps = {
  pipelineId?: number;
  wrapContainer?: boolean;
}

const Log: React.FC<LogProps> = (props) => {

  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const location = useLocation();
  const actionRef = useRef<ActionType>();
  const wrapContainer : boolean = (props?.wrapContainer === undefined? true: props.wrapContainer );
  // @ts-ignore
  const pipelineId = props?.pipelineId || location?.state?.pipelineId || null;
  const commonColumns: ProColumns<API.LogRecord>[] = [
    {
      title: '序号',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: 'Channel信息',
      dataIndex: ['channel', 'name'],
      hideInSearch: true,
    },
    {
      title: 'Pipeline信息',
      dataIndex: ['pipeline', 'name'],
      hideInSearch: true,
    },
    {
      title: 'Node信息',
      dataIndex: ['nid'],
      hideInSearch: true,
    },
    {
      title: '日志标题',
      dataIndex: ['title'],
      hideInSearch: true,
    },
    {
      title: '日志内容',
      render: (_, record) => {
        return <a onClick={() => Modal.error({title: '日志内容', content: record?.message,maskClosable:true, footer: null})}>
          详细日志
        </a>
      },
      hideInSearch: true,
    },
    {
      title: '发生时间',
      dataIndex: ['gmtCreate'],
      hideInSearch: true,
      renderText: text => (text? moment(text).format('YYYY-MM-DD HH:mm:ss') : '--')
    }
  ]

  const LogTable: React.FC = () => (
    <ProTable<API.LogRecord, API.PipelinePageRequest>
      headerTitle='日志管理'
      actionRef={actionRef}
      rowKey="key"
      search={{
        labelWidth: 120,
      }}
      request={logRecords}
      params={{pipelineId:pipelineId}}
      columns={commonColumns}
    />);

  return (
    wrapContainer? (
      <PageContainer>
        <LogTable/>
      </PageContainer>
    ) : <LogTable/>
  );
};

export default Log;
